<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="110px" label-position="right" style="height:650px;overflow:auto">
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="工厂货号" prop="factory_art_no">
                                <el-input v-model="form.factory_art_no" placeholder="请输入工厂货号" clearable style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="SKC" prop="skc">
                                <el-input v-model="form.skc" placeholder="请输入SKC" clearable style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="样衣尺寸" prop="size">
                                <el-input v-model="form.size" placeholder="请输入样衣尺寸" clearable style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="颜色" prop="colour">
                                <el-input v-model="form.colour" placeholder="请输入颜色" clearable style="width:100%"></el-input>
                                <!-- <el-select v-model="form.colour"  filterable placeholder="请选择颜色" style="width:100%">
                                    <el-option v-for="item in colorList" :key="item.colour_id" :label="item.title" :value="item.colour_id"/>
                                </el-select> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="针种" prop="needle_seed">
                                <el-select v-model="form.needle_seed"  filterable placeholder="请选择针种" style="width:100%" multiple clearable>
                                    <el-option v-for="item in needleList" :key="item.id" :label="item.title" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="客户" prop="custom_id">
                                <el-select v-model="form.custom_id"  filterable placeholder="请选择客户" style="width:100%" clearable>
                                    <el-option v-for="item in humList" :key="item.custom_id" :label="item.apply_name" :value="item.custom_id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品品牌" prop="brand_id">
                                <el-select v-model="form.brand_id"  filterable placeholder="请选择品牌" style="width:100%" clearable>
                                    <el-option v-for="item in cates" :key="item.id" :label="item.brand_name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="打版交期" prop="deliver_date">
                                <el-date-picker v-model="form.deliver_date" :value-format="'YYYY-MM-DD'" style="width:100%" type="date" placeholder="请选择交期时间" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="1" >
                        <el-col :span="8">
                            <el-form-item label="工厂" prop="supplier_id">
                                <el-select v-model="form.supplier_id"  filterable placeholder="请选择工厂" style="width:100%" @change="factoryChange" clearable>
                                    <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="吓数" prop="staff_id">
                                <el-select v-model="form.staff_id" :disabled="factory" filterable placeholder="请选择员工" style="width:100%" clearable>
                                    <el-option v-for="item in XiaList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="紧急" prop="order_label">
                                <el-switch v-model="form.order_label" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="12">
                        <el-form-item label="打版要求" prop="ask">
                            <el-input v-model="form.ask" placeholder="请输入打版要求" clearable style="width:100%" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 打版图片 -->
                    <el-col>
                        <el-form-item label="打版图片" prop="images">
                            <sc-upload-multiple v-model="form.images" draggable>
                                <el-button type="primary">多图片上传</el-button>
                            </sc-upload-multiple>
                        </el-form-item>
                    </el-col>
                    <!-- 毛料 -->
                    <el-col :span="24">
                        <el-form-item label="毛料" prop="material_data">
                            <el-button type="primary" size="small" icon="el-icon-plus" @click="openWu">新增毛料</el-button>
                            <sc-form-table ref="table" v-model="form.material_data" :addTemplate="material" placeholder="暂无数据" hideAdd>
                                <el-table-column prop="skc" label="毛料skc" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.skc}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_name" label="毛料名称" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.material_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="color_number" label="色号" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.color_number}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="colour" label="颜色" align="center">
                                    <template #default="scope">
                                        <div v-if="scope.row.colour">{{scope.row.colour}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="image" label="图片" align="center">
                                    <template #default="scope">
                                        <el-image style="width:50px;height:50px" :src="scope.row.image" :preview-src-list="scope.row.image" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="apply_name" label="供应商" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.apply_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <!-- 辅料 -->
                    <el-col :span="24">
                        <el-form-item label="辅料" prop="accessories_data">
                            <el-button type="primary" size="small" icon="el-icon-plus" @click="openWuFu">新增辅料</el-button>
                            <sc-form-table ref="table" v-model="form.accessories_data" :addTemplate="material" placeholder="暂无数据" hideAdd>
                                <el-table-column prop="skc" label="辅料skc" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.skc}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_name" label="辅料名称" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.material_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="color_number" label="色号" align="center">
                                    <template #default="scope">
                                        <div>{{scope.row.color_number}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="colour" label="颜色" align="center">
                                    <template #default="scope">
                                        <div v-if="scope.row.colour">{{scope.row.colour}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="image" label="图片" align="center">
                                    <template #default="scope">
                                        <el-image style="width:50px;height:50px" :src="scope.row.image" :preview-src-list="scope.row.image" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="ratio" label="用量" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.ratio" placeholder="请输入用量"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                                <el-table-column prop="remark" label="备注">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <!-- 工序 -->
                    <el-col :span="24">
                        <el-form-item label="工序信息" prop="process_data">
                            <sc-form-table ref="table" v-model="form.process_data" :addTemplate="process" placeholder="暂无数据">
                                <el-table-column width="65">
                                    <template #default="scope">
                                        <el-button type="primary" size="small" icon="el-icon-search" @click="openGong(scope.row,scope.$index)"></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="process_id" label="一级工序" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.process_id" @change="changeGong(scope.row)" placeholder="请选择" filterable>
                                            <el-option v-for="item in processList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="GongxuSon" label="二级工序" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.two_process_id" placeholder="请选择">
                                            <el-option v-for="item in scope.row.GongxuSon" :key="item.id" :label="item.title" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="price" label="工序单价" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.price" placeholder="请输入工序单价"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="staff_id" label="选择员工">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.staff_id" placeholder="请选择">
                                            <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="sort" label="排序">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.sort"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="工序备注">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.remark"></el-input>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-main>
            <el-footer>
                <div style="display:flex;justify-content: end;">
                    <el-button @click="visible=false" >取 消</el-button>
                    <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 定</el-button>
                </div>
            </el-footer>
        </el-container>
		<template #footer>
		</template>
        <wu v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable :query="{category_id:this.type==1?1:2}"></wu>
        <gong v-if="gong.save" ref="gongDialog" @success="gongSuccess" @closed="gong.save = false" draggable></gong>
	</el-dialog>
</template>

<script>
import Gong from './gong'
import wu from './wu'
export default {
  components: { wu,Gong },
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '添加打版',
                edit: '编辑打版',
                show: '查看'
            },
            dialog: {
				save: false
			},
            gong: {
				save: false
			},
            visible: false,
            isSaveing: false,
            grade:"潜力",
            //表单数据
            form: {
                id:"",
                deliver_date:"",
                images:"",
                supplier_id:"",
                factory_quote:"",
                order_pricing:"",
                factory_art_no:"",
                colour:"",
                size:"",
                needle_seed:"",
                design_num:"",
                skc:"",
                ask:"",
                custom_id:"",
                brand_id:"",
                material_data:[],
                process_data:[],
                staff_id:"",
                order_label:0
            },
            material:{material_code:"",material_id:"",},
            process:{process_id:"",two_process_id:"",sort:"",price:"",remark:"",staff_id:""},
            factory:false,
            //验证规则
            rules: {
                supplier_id: [
                    {required: true, message: '请选择工厂'}
                ],
                deliver_date: [
                    {required: true, message: '请选择打版交期'}
                ],
                size: [
                    {required: true, message: '请输入样衣尺码'}
                ],
            },
            cates: [],  //品牌
            materialList: [],  //物料
            colorList: [],  //颜色
            humList: [],  //客户
            applyList: [],  //工厂
            staffList:[],//员工
            codeList: [],  //物料编号
            moBanList:[],    //模版
            processList:[], //工序
            needleList:[], //针
            XiaList:[], //吓数员工
            type:""
        }
    },
    mounted() {
        this.getMaterial()
        this.getColor()
        this.getCate()
        this.getHum()
        this.getApply()
        this.getStaff()
        this.getMoBan()
        this.getGongXu()
        this.getNeedle()
        this.getXia()
    },
    methods: {
        //显示
        open(mode='add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit(){
            this.form.process_data.map((item,index)=>{
                item.sort = index+1
            })
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res  = [];
                    if (this.form.id) {
                        res = await this.$API.develop.edition.edit.post(this.form);
                    }else{
                        res = await this.$API.develop.edition.add.post(this.form);
                    }
                    this.isSaveing = false;
                    if(res.code == 1){
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    }else{
                        this.$alert(res.message, "提示", {type: 'error'})
                    }
                }else{
                    return false;
                }
            })
        },
        //表单注入数据
        async setData(data) {
			this.form.id = data.id
            var res = await this.$API.develop.edition.detail.get({id:data.id});
            this.form.factory_art_no = res.data.goods.factory_art_no
			this.form.skc = res.data.goods.skc
			this.form.size = res.data.goods.size
			this.form.colour = res.data.goods.colour
			this.form.needle_seed = res.data.goods.needle_seed
            this.form.custom_id = res.data.goods.custom_id
			this.form.brand_id = res.data.goods.brand_id
			this.form.deliver_date = res.data.deliver_date
			this.form.supplier_id = res.data.supplier_id
			this.form.ask = res.data.ask
			this.form.images = res.data.images
			this.form.material_data = res.data.marterial
			this.form.accessories_data = res.data.accessories_data
            this.form.order_label = res.data.order_label
            res.data.marterial.map((item,index)=>{
                this.form.material_data.map((item1,index1)=>{
                    if(index==index1){
                        item1.category_name = item.material.category_name
                        item1.color_number = item.material.color_number
                        item1.colour = item.material.colour
                        item1.skc = item.material.skc
                    }
                })
            })
            res.data.accessories_data.map((item,index)=>{
                this.form.accessories_data.map((item1,index1)=>{
                    if(index==index1){
                        item1.category_name = item.material.category_name
                        item1.color_number = item.material.color_number
                        item1.colour = item.material.colour
                        item1.skc = item.material.skc
                    }
                })
            })
			this.form.process_data = res.data.process
			this.form.staff_id = res.data.staff_id
            if(res.data.supplier_id==0){
                this.factory = true
            }
		},
        // 获取物料
        async getMaterial(){
            var res = await this.$API.all.material.get();
            this.materialList = res.data;
        },
        // 获取颜色
        async getColor(){
            var res = await this.$API.all.color.get();
            this.colorList = res.data;
        },
        // 获取品牌
        async getCate(){
            var res = await this.$API.all.brand.get();
            this.cates = res.data;
        },
        // 获取客户
        async getHum(){
            var res = await this.$API.all.customer.get();
            this.humList = res.data;
        },
        // 获取工序
        async getGongXu(){
            var res = await this.$API.all.process.get({pid:0});
            this.processList = res.data;
        },
        // 获取针种
        async getNeedle(){
            var res = await this.$API.all.needle.get();
            this.needleList = res.data;
        },
        // 获取工厂
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.applyList = res.data;
        },
        // 获取模板
        async getMoBan(){
            var res = await this.$API.develop.template.lists.get();
            this.moBanList = res.data.rows;
        },
        async change(e){
            var res = await this.$API.all.query.get({id:e});
            this.codeList = res.data; 
        },
        //所有员工
        async getStaff(){
            var res = await this.$API.all.staff.get();
            this.staffList = res.data;
        },
        //吓数员工
        async getXia(){
            var res = await this.$API.all.staff.get({job_code:100012});
            this.XiaList = res.data;
        },
        // 毛料
        openWu(){
            this.type = 1
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit')
            })
        },
        // 辅料
        openWuFu(){
            this.type = 2
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit')
            })
        },
        handleSuccess(data, mode) {
            let a = []
            data.map((item)=>{
                a.push({
                    material_id:item.material.material_id,
                    material_spec_code:item.spec_code,
                    category_name:item.material.category_name,
                    material_name:item.material.material_name,
                    color_number:item.color_number,
                    skc:item.skc,
                    colour:item.colour,
                    remark:item.remark,
                    unit:item.material.unit_name,
                    image:[item.image],
                    apply_name:item.material.apply_name,
                })
            })
            let existingIds = this.form.material_data.map(item => item.material_spec_code);
            for(let i = a.length - 1; i >= 0; i--){
                if(existingIds.includes(a[i].material_spec_code)){
                    a.splice(i, 1);
                }
            }
            let existingIds1 = this.form.accessories_data.map(item => item.material_spec_code);
            for(let i = a.length - 1; i >= 0; i--){
                if(existingIds1.includes(a[i].material_spec_code)){
                    a.splice(i, 1);
                }
            }
            if(mode==1){
                this.form.material_data = [...this.form.material_data,...a]
            }else{
                this.form.accessories_data = [...this.form.accessories_data,...a]
            }
        },
        openGong(row,index){
            this.gong.save = true
			this.$nextTick(() => {
				this.$refs.gongDialog.open('add').setData({index:index})
			})
        },
        gongSuccess(data, mode) {
            console.log('data :>> ', data);
            console.log('mode :>> ', mode);
            this.form.process_data = []
            data[0].detail.map(item=>{
                this.form.process_data.push({
                    process_id:item.process_id,
                    process_title:item.process_title,
                    price:item.price,
                    sort:item.sort,
                    remark:item.remark,
                    GongxuSon:item.GongxuSon,
                    staff_id:"",
                    two_process_id:item.two_process_id
                })
            })
		},
        factoryChange(e){
            this.applyList.map(item=>{
                if(item.apply_id==e){
                    if(item.is_self!=1){
                        this.factory = true
                    }else{
                    this.factory = false
                    }
                }
            })
            this.form.staff_id = ""
        },
        async changeGong(e){
            var res = await this.$API.all.process.get({pid:e.process_id});
            e.GongxuSon = res.data
        },
    }
}
</script>

<style lang="scss">
.el-form-item--default{
    align-items: center;
}
</style>
